<script setup>
import * as echarts from "echarts"
import apiBigscreen  from "@/api/bigscreen.js"
import {onMounted, ref} from "vue";

const refEcharts = ref()
const chart = ref()
const data = ref([])

onMounted(async () => {
  data.value = await apiBigscreen.getRightBottom()
  chart.value = echarts.init(refEcharts.value)
  chart.value.setOption({
    title: {
      text: "堆叠柱状图",
      top: "5%",
      x: "center",
      textStyle: {
        color: "#fff",
        fontSize: 20,
        textShadowBlur: 10,
        textShadowColor: "#33ffff"
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      data: data.value.day,
      axisLine: {
        lineStyle: {
          color: "#fff"
        }
      }
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#fff"
        }
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      }
    },
    series: [
      {
        name: "服饰",
        type: "bar",
        data: data.value.num.Clothes,
        stack: "total",
        label: {
          show: true
        },
        emphasis: {
          focus: "series"
        }
      },
      {
        name: "数码",
        type: "bar",
        data: data.value.num.digit,
        stack: "total",
        label: {
          show: true
        },
        emphasis: {
          focus: "series"
        }
      },
      {
        name: "家电",
        type: "bar",
        data: data.value.num.Electrical,
        stack: "total",
        label: {
          show: true
        },
        emphasis: {
          focus: "series"
        }
      },
      {
        name: "家居",
        type: "bar",
        data: data.value.num.gear,
        stack: "total",
        label: {
          show: true
        },
        emphasis: {
          focus: "series"
        }
      },
      {
        name: "日化",
        type: "bar",
        data: data.value.num.Chemicals,
        stack: "total",
        label: {
          show: true
        },
        emphasis: {
          focus: "series"
        }
      },
    ]
  })
})
</script>

<template>
  <div class="chart" ref="refEcharts"></div>
</template>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>